/* ==================
        初始化
 ==================== */

body {
  background-color: #fff;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  font-family: "mp-quote", -apple-system-font, BlinkMacSystemFont,
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI",
    "Microsoft YaHei", Arial, sans-serif;
}

view,
scroll-view,
swiper,
swiper-item,
cover-view,
cover-image,
icon,
text,
rich-text,
progress,
button,
checkbox,
form,
input,
label,
radio,
slider,
switch,
textarea,
navigator,
audio,
camera,
image,
video {
  box-sizing: border-box;
}

switch {
  transform: translateX(8px) scale(0.9);
}

.el-wrap {
  min-width: 1220px;
  width: 64%;
  margin: 0 auto;
}

/**主体-头部、底部*/
.el-head {
  line-height: 24px;
  padding: 20px 56px;
}
.el-head .logo image {
  width: 172px;
  height: 64px;
}
.el-head .nav .item {
  margin: 0 28px;
  font-size: 16px;
}
.el-head .nav .item.active {
  color: #66bfbf;
  position: relative;
}
.el-head .nav .item.active a {
  color: #66bfbf;
}
.el-head .nav .item.active::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 16px);
  content: "";
  width: 100%;
  height: 2px;
  background-color: #66bfbf;
}
.el-foot {
  background-color: #000;
  padding: 60px 0;
  color: #fff;
  line-height: 1;
}
.el-foot .logos .logo {
  width: 154px;
  height: 56px;
}
.el-foot .logos .vlog {
  width: 144px;
  height: 26px;
}
.el-foot .logos .border {
  width: 1px;
  height: 40px;
  background-color: #fff;
  margin: 0 28px;
}
.el-foot .nav {
  width: 266px;
}
.el-foot .nav .item {
  width: 84px;
  font-size: 20px;
  margin: 21px 96px 21px 0;
}
.el-foot .nav .item:nth-child(2n) {
  margin-right: 0;
}
.el-foot .info .item {
  margin: 21px 0;
  font-size: 20px;
}
.el-foot .info .item::before {
  margin-right: 10px;
}
.el-foot .ewm image {
  width: 104px;
  height: 104px;
  margin: 0 auto;
}
.el-foot .ewm {
  font-size: 14px;
  line-height: 26px;
  text-align: center;
}
.el-foot .ewm .item {
  margin-left: 36px;
}
.el-foot .copyRight {
  text-align: center;
  padding-top: 46px;
  margin-top: 26px;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.45);
}

/**
  * 页面公共样式
  **/
input {
  height: inherit;
}

uni-button,
button {
  font-weight: normal;
}

uni-button.no-border:before,
uni-button.no-border:after,
button.no-border:before,
button.no-border:after {
  border: 0 none;
}

button {
  border: 0 none;
}

button.btn {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
  height: inherit;
  line-height: inherit;
}

view[class*="-area"] {
}

view[class*="use-area"] {
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  margin-top: 10px;
}

view[class*="-round-area"] {
  border-radius: 10px;
}

.uni-modal {
  border-radius: 7.5px !important;
}

/* 分隔线 */
.uni-divider {
  height: 7.5px;
}

.use-page {
  min-height: 100%;
  width: 100%;
  background: #fff;
}

.use-hover-class {
  opacity: 0.6;
}

.use-btn {
  background-color: rgb(43, 157, 192);
  padding: 8px 30px;
  border-radius: 30px;
  color: #fff;
}

.ft-close {
  background-color: rgba(250, 250, 250, 0.15);
  border: 1px solid #fff;
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  font-weight: 300;
}

/* 头部navbar */
.use-navbar {
}

.use-navbar .use-navbar-btn {
  width: 32.7px;
  height: 32.7px;
  background-color: rgba(250, 250, 250, 0.35);
  border-radius: 50%;
  line-height: 32.7px;
  text-align: center;
  font-weight: 450;
}

/* 三角形 */
.triangle-up:after {
  content: " ";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  position: absolute;
  top: -8px;
  right: 7px;
}

.triangle-down:after {
  content: " ";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
  position: absolute;
  top: -8px;
  right: 7px;
}

.triangle-b::after {
  content: " ";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;

  border-top: 7px solid #ff6a6c;
}

.scale-08 {
  transform: scale(0.8);
  transform-origin: left center;
}

.scale-09 {
  transform: scale(0.9);
  transform-origin: left center;
}

/**
  * 组件公共样式
  **/
.price,
.price-jf,
.discount {
  font-size: 33px;
  color: #ff6a6c;
  line-height: 1;
  font-weight: 520;
}

.m-price {
  font-size: 12px;
  text-decoration: line-through;
  color: #909399;
  margin-left: 10px;
}

.price::before {
  content: "￥";
  font-size: 12px;
}

.m-price::before {
  content: "￥";
  font-size: 12px;
}

.price::after {
  content: attr(data-decimal);
  font-size: 12px;
}

.s-price {
  font-size: 15px;
  color: #ff6a6c;
  line-height: 1;
  font-weight: 580;
}

.s-price::before {
  content: "￥";
  font-size: 11px;
}

.o-price {
  font-size: 12px;
  color: #bbb;
  line-height: 1;
  margin-left: 5px;
}

.o-price::before {
  content: "￥";
  font-size: 11px;
}

.price-add::before {
  content: "＋";
  font-weight: 600;
}

.price-sub::before {
  content: "－";
  font-weight: 600;
}

.price-jf::after {
  content: "积分";
  font-size: 11px;
  margin-left: 3px;
}

.badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #ff6a6c;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  padding: 3px 6px;
  border-radius: 50px;
  font-weight: normal !important;
}

.badge-small {
  transform: scale(0.8);
  transform-origin: center center;
}

.discount::after {
  content: "折";
  font-size: 12px;
  margin-left: 3px;
}

.dn {
  display: none !important;
}

.dblock {
  display: block;
}

.diblock {
  display: inline-block;
}

/* flex 布局 */
.dflex {
  display: flex;
  align-items: center;
}

.dflex-fs {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.dflex-s {
  display: flex;
  align-items: flex-start;
}

.dflex-e {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}

.dflex-es {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.dflex-ec {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.dflex-sc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.dflex-c {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dflex-col-c {
  display: flex;
  justify-content: center;
}

.dflex-a {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.dflex-b {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dflex-bs {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.dflex-flow-c {
  flex-flow: column;
}

.dflex-row {
  flex-flow: row;
}

.dflex-col {
  flex-flow: column;
}

.dflex-wrap-w {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row-e {
  align-items: flex-end;
}

.row-s {
  align-items: flex-start;
}

.flex1 {
  flex: 1;
}

/* 块元素对齐 */

.u-flex-wrap {
  flex-wrap: wrap;
}

.u-flex-nowrap {
  flex-wrap: nowrap;
}

.u-col-center {
  align-items: center;
}

.u-col-top {
  align-items: flex-start;
}

.u-col-bottom {
  align-items: flex-end;
}

.u-row-center {
  justify-content: center;
}

.u-row-left {
  justify-content: flex-start;
}

.u-row-right {
  justify-content: flex-end;
}

.u-row-between {
  justify-content: space-between;
}

.u-row-around {
  justify-content: space-around;
}

.u-flex-col {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.dgrid {
  display: grid;
}

.dgrid-col-3 {
  grid-gap: 10px 10px;
  grid-template-columns: repeat(3, 1fr);
}

.dgrid-col-5 {
  grid-gap: 10px 10px;
  grid-template-columns: repeat(5, 1fr);
}

.box-sizing-b {
  box-sizing: border-box;
}

.box-sizing-c {
  box-sizing: content-box;
}

/* 间隔槽 */
.gap {
  display: block;
  width: 100%;
  height: 10px;
  background: #f5f5f5;
}

/* 垂直线 */
.vertical-line {
  border-left: 1px solid #ededed;
  height: 30%;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 0;
}

.dotted-line,
.doblue-line {
  width: 100%;
  position: relative;
  text-align: center;
  font-size: 15px;
  font-weight: 550;
  color: #000;
}

.dotted-line::before,
.doblue-line::before,
.dotted-line::after,
.doblue-line::after {
  content: " ";
  position: absolute;
  width: 34%;
  border-top: 1px dashed #d7d7d7;
  top: 10px;
}

.dotted-line::before,
.doblue-line::before {
  left: 6px;
}

.dotted-line::after,
.doblue-line::after {
  right: 6px;
}

.doblue-line {
  font-weight: normal;
  line-height: 20px;
}

.doblue-line::before,
.doblue-line::after {
  border-top: 1px solid #fbfbfb;
}

/* 上边框 */
.border-top {
  border-top: 1px solid #efefef;
}

/* 下边框线 */
.border-bottom {
  border-bottom: 1px solid #f5f5f5;
}

.border-bottom-dotted {
  border-bottom: 1px dashed #f5f5f5;
}

/* 边框颜色 */
.border-red {
  border: #ff0000 1px solid;
  color: #ff0000;
}
.border-gray {
  border: #cacaca 1px solid;
}
.border-yellow {
  border: #d7b77a 1px solid;
  color: #d7b77a;
}

.border-white {
  border: #ffffff 1px solid;
  color: #d7b77a;
}

.border-ching {
  border: #69c6e2 1px solid;
  color: #00d0d0;
}
.border-line {
  border-bottom: 1px solid #f7f7f7;
}
.border-line-2 {
  border-bottom: 2.5px solid #f7f7f7;
}
.border-line-3 {
  border-bottom: 3.5px solid #f7f7f7;
}
/* 文字超出省略 */
.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: 100%;
}

.clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  line-height: 33px;
}

.clamp-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  line-height: 33px;
}

.clamp-5 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  line-height: 33px;
}

.clamp-lh {
  display: -webkit-box;
  line-height: 33px;
}

.break-all {
  word-break: break-all;
}

.ws-np {
  white-space: nowrap;
}

.line-height-0 {
  line-height: 0;
}

.line-height-1 {
  line-height: 1;
}

.line-height-item {
  line-height: 30px;
}

/* 文字对齐 */
.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

.tal {
  text-align: left;
}

/* 相对定位|绝对定位|固定定位 */
.fixed {
  position: fixed;
  z-index: 91;
}

.pos-r {
  position: relative;
  z-index: 90;
}

.pos-f {
  position: fixed;
  z-index: 91;
}

.pos-a {
  position: absolute;
  z-index: 90;
}

.pos-t-c {
  top: 50%;
  transform: translateY(-50%);
}

.pos-l-c {
  left: 50%;
  transform: translateX(-50%);
}

.pos-tl-c {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pos-top {
  top: 0;
}

.pos-top-xs {
  top: 5px;
}

.pos-right {
  right: 0;
}

.pos-bottom {
  bottom: 0;
}

.pos-left {
  left: 0;
}

.pos-left-xs {
  left: 5px;
}

.pos-full {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.pos-t-full {
  top: 0;
  left: 0;
  right: 0;
}

.pos-b-full {
  bottom: 0;
  left: 0;
  right: 0;
}

/* 圆角 */
.border-radius-big {
  border-radius: 50px;
}

.border-radius-lg {
  border-radius: 25px;
}

.border-radius {
  border-radius: 10px;
}

.border-radius-xs {
  border-radius: 3px;
}

.border-radius-sm {
  border-radius: 5px;
}

.border-radius-c {
  border-radius: 50%;
}

.border-radius-top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.border-radius-bottom {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.border-radius-top30 {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.border-radius-top60 {
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.border-radius-left {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.border-radius-left50 {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.border-radius-right {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.border-radius-right30 {
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.border-radius-right50 {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.border-radius-br-xs {
  border-bottom-right-radius: 5px;
}

view[class*="border-radius"] {
  overflow: hidden;
}

.use-tag {
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  line-height: 1;
  padding: 3.5px 9px;
  font-size: 11px;
}

.use-tag-round {
  line-height: 1;
  padding: 6px;
  font-size: 11px;
  z-index: 9;
}

.use-tags {
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}

.use-tags view {
  font-size: 10px;
  color: #ff6a6c;
  border: 1px solid #ff6a6c;
  line-height: 1;
  padding: 4px 4px;
  background: #fff5f5;
  border-radius: 4px;
  margin-right: 5px;
}

.tag-default {
  border-radius: 5px;
  padding: 2.5px 6px;
  font-size: 10.5px;
  color: #e70a0a;
  border: 1px solid #ff6a6c;
}

.tag-blue {
  color: #393a34;
  border: 1px solid #4398e2;
}

.tag-base,
.tag-warn,
.tag-gray {
  border-radius: 15px;
  padding: 4px 12px;
  font-size: 12px;
}

.tag-base {
  color: #fffcf9;
  background: #ff6a6c;
  border: 1px solid #ff6a6c;
}

.tag-gray {
  color: #585858;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}

.tag-warn {
  color: #333;
  background: #ffbc49;
  border: 1px solid #ffbc49;
}

.fixed-top {
  width: 82.5px;
  height: 82.5px;
  right: 15px;
  bottom: 15px;
  background: #fff;
  box-shadow: 0px 0px 7px 3px #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 92;
}

.fixed-top .iconfont {
  font-size: 22px;
}

/* 底部操作区 */
.fixed-oper-area {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  z-index: 998;
  font-size: 33px;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

/* 宽高 */
/* #ifdef APP-NVUE */
.w-full {
  flex: 1;
}

/* #endif */
/* #ifndef APP-NVUE */
.wh-full {
  width: 100%;
  height: 100%;
}

.h-full {
  height: 100%;
}

.w-full {
  width: 100%;
}

/* #endif */
.wpre-10 {
  width: 10%;
}

.wpre-15 {
  width: 15%;
}

.wpre-20 {
  width: 20%;
}

.wpre-30 {
  width: 30%;
}
.wpre-35 {
  width: 35%;
}
.wpre-45 {
  width: 45%;
}
.wpre-50 {
  width: 50%;
}

.wpre-85 {
  width: 85%;
}
.wpre-70 {
  width: 70%;
}
.wpre-75 {
  width: 75%;
}

/* 背景色 */
.bg-main {
  background: #fff;
}

.bg-dark {
  background: #f0f0f0;
}

.bg-dark-1 {
  background: #f0f0f0;
}

.bg-dark-2 {
  background: rgb(71, 71, 71, 0.35);
}

.bg-dark-3 {
  background: #e8e8e8;
}
.bg-dark-4 {
  background: #f9f9f9;
}

.bg-blue {
  background: #1296db;
  color: #fff;
}

.bg-blue-2 {
  background: #f2f7f9;
}

.bg-blue-low {
  background: #f2f4fd;
}

.bg-base {
  background-color: #aec8bf;
  color: #fff;
}

.bg-base-2 {
  background-color: #d0eeda;
  color: #ff5500;
}

.bg-warn {
  background: #ffbc49;
  color: #333;
}

.bg-yellow {
  background: #ff5500 !important;
  color: #fff !important;
}

.bg-disabled {
  background: #f4f4f4 !important;
  color: #bbb !important;
}

.bg-gray {
  background: #e8e8e8;
}

.bg-gray-2 {
  background: #f9f9f9;
}

.bg-gray-a {
  background: rgba(0, 0, 0, 0.75);
}

/* 段落缩进 */
.fs-indent {
  text-indent: 2rem;
}

/* 文字颜色 */
.fs-shadow {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
}

.fs-gray {
  color: #8c8c8c;
}

.fs-gray-3 {
  color: #535353;
}

.fs-blue {
  color: #0f579a;
}

.fs-blue-2 {
  color: #4399fc !important;
}

.fs-yellow {
  color: #e6a23c;
}

.ft-main {
  color: #333;
}

.ft-base {
  color: #95c8c8;
}

.ft-zfb {
  color: #1296db;
}

.ft-wx {
  color: #24db5a;
}
.ft-ios {
  color: #8b8b8b;
}
.ft-gray {
  color: #bababa;
}

.ft-dark {
  color: #818181;
}

.ft-dark-2 {
  color: #bfbfbf;
}

.ft-dark-3 {
  color: #737373;
}

.ft-dark-4 {
  color: #4c4c4c;
}

.ft-black {
  color: #333;
}

.ft-red {
  color: #ff0000;
}

.ft-yellow {
  color: rgb(255, 106, 108);
}

.ft-white {
  color: #fff;
}

.ft-white-2 {
  color: #eaeaea;
}

/* 文字标签 */
.fs-label {
  padding: 1.5px 7.5px;
  border-radius: 15px;
  background-color: #f2f7fa;
}

.fs-level {
  padding: 1.5px 7.5px;
  border-top-right-radius: 10.5px;
  border-bottom-left-radius: 10.5px;
  border-top-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #f2f7fa;
  border: 1px solid #fff;
  background-image: linear-gradient(direction, #dce1e3, #e9eef0, #d3d8da);
  line-height: 1.25;
}

.fs-tags {
  padding: 3.5px 10.2.5px;
  border-top-left-radius: 7.5px;
  border-top-right-radius: 2.5px;
  border-bottom-left-radius: 7.5px;
  border-bottom-right-radius: 7.5px;
  background-color: #ff9152;
  color: #fff;
}

/* 文字大小 */
.fs-xxs {
  font-size: 11px;
}

.fs-xs {
  font-size: 12px;
}

.fs-sm {
  font-size: 14px;
}

.fs {
  font-size: 15px;
}

.fs-lg {
  font-size: 33px;
}

.fs-xl {
  font-size: 20px;
}

.fs-xxl {
  font-size: 25px;
}

.fs-xxxl {
  font-size: 30px;
}

.fs-big {
  font-size: 26px;
}

.fs-20 {
  font-size: 10px;
}

.fs-25 {
  font-size: 12.5px;
}

.fs-26 {
  font-size: 13px;
}

.fs-28 {
  font-size: 14px;
}

.fs-30 {
  font-size: 15px;
}

.fs-34 {
  font-size: 17px;
}

.fs-36 {
  font-size: 18px;
}

.fs-40 {
  font-size: 20px;
}

.fs-50 {
  font-size: 25px;
}
.fs-60 {
  font-size: 30px;
}

.fs-70 {
  font-size: 35px;
}

.fs-80 {
  font-size: 40px;
}

.fs-90 {
  font-size: 45px;
}

.fs-120 {
  font-size: 60px;
}

/* 文字加粗 */
.fwb {
  font-weight: 580;
}

.fwbd {
  font-weight: bold !important;
}
.active {
  color: #4399fc !important;
}

.disabled {
  color: #bbb !important;
}

.active-bg {
  border-radius: 8px;
  background: #fff;
  color: #ff6a6c;
}

.image-60 {
  width: 30px;
  height: 30px;
}

.image-80 {
  width: 40px;
  height: 40px;
}

.image-sm {
  width: 50px;
  height: 50px;
}

.image-80 {
  width: 145px;
  height: 145px;
}

.image-160 {
  width: 310px;
  height: 310px;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.headimg {
}

/* 外边距 */
.margin-0 {
  margin: 0;
}

.margin-xs {
  margin: 5px;
}

.margin-sm {
  margin: 10px;
}

.margin {
  margin: 15px;
}

.margin-lg {
  margin: 20px;
}

.margin-xl {
  margin: 25px;
}

.margin-big {
  margin: 50px;
}

.margin-top-xs {
  margin-top: 5px;
}

.margin-top-sm {
  margin-top: 10px;
}

.margin-top {
  margin-top: 15px;
}

.margin-top-lg {
  margin-top: 20px;
}

.margin-top-xl {
  margin-top: 25px;
}

.margin-top-xxl {
  margin-top: 30px;
}

.margin-top-big {
  margin-top: 50px;
}

.margin-right-xs {
  margin-right: 5px;
}

.margin-right-sm {
  margin-right: 10px;
}

.margin-right {
  margin-right: 15px;
}

.margin-right-lg {
  margin-right: 20px;
}

.margin-right-xl {
  margin-right: 25px;
}

.margin-bottom-xs {
  margin-bottom: 5px;
}

.margin-bottom-sm {
  margin-bottom: 10px;
}

.margin-bottom {
  margin-bottom: 15px;
}

.margin-bottom-lg {
  margin-bottom: 20px;
}

.margin-bottom-xl {
  margin-bottom: 25px;
}

.margin-bottom-big {
  margin-bottom: 50px;
}

.margin-left-xs {
  margin-left: 5px;
}

.margin-left-sm {
  margin-left: 10px;
}

.margin-left {
  margin-left: 15px;
}

.margin-left-lg {
  margin-left: 20px;
}

.margin-left-xl {
  margin-left: 25px;
}

.margin-lr-xs {
  margin-left: 5px;
  margin-right: 5px;
}

.margin-lr-sm {
  margin-left: 10px;
  margin-right: 10px;
}

.margin-lr {
  margin-left: 15px;
  margin-right: 15px;
}

.margin-lr-lg {
  margin-left: 20px;
  margin-right: 20px;
}

.margin-lr-xl {
  margin-left: 25px;
  margin-right: 25px;
}

.margin-tb-xs {
  margin-top: 5px;
  margin-bottom: 5px;
}

.margin-tb-sm {
  margin-top: 10px;
  margin-bottom: 10px;
}

.margin-tb {
  margin-top: 15px;
  margin-bottom: 15px;
}

.margin-tb-lg {
  margin-top: 20px;
  margin-bottom: 20px;
}

.margin-tb-xl {
  margin-top: 25px;
  margin-bottom: 25px;
}

.margin-t0 {
  margin-top: 0 !important;
}

.padding-r0 {
  padding-right: 0 !important;
}

/* 内边距 */

.padding-0 {
  padding: 0;
}

.padding-xs {
  padding: 5px;
}

.padding-sm {
  padding: 10px;
}

.padding {
  padding: 15px;
}

.padding-lg {
  padding: 20px;
}

.padding-xl {
  padding: 25px;
}

.padding-16 {
  padding: 8px;
}

.padding-top-xs {
  padding-top: 5px;
}

.padding-top-sm {
  padding-top: 10px;
}

.padding-top {
  padding-top: 15px;
}

.padding-top-lg {
  padding-top: 20px;
}

.padding-top-xl {
  padding-top: 25px;
}

.padding-top-big {
  padding-top: 50px !important;
}

.padding-right-xs {
  padding-right: 5px;
}

.padding-right-sm {
  padding-right: 10px;
}

.padding-right {
  padding-right: 15px;
}

.padding-right-lg {
  padding-right: 20px;
}

.padding-right-xl {
  padding-right: 25px;
}

.padding-right-0 {
  padding-right: 0;
}

.padding-bottom-xs {
  padding-bottom: 5px;
}

.padding-bottom-sm {
  padding-bottom: 10px;
}

.padding-bottom {
  padding-bottom: 15px;
}

.padding-bottom-lg {
  padding-bottom: 20px;
}

.padding-bottom-xl {
  padding-bottom: 25px !important;
}

.padding-bottom-big {
  padding-bottom: 50px;
}

.padding-left-xs {
  padding-left: 5px;
}

.padding-left-sm {
  padding-left: 10px;
}

.padding-left {
  padding-left: 15px;
}

.padding-left-lg {
  padding-left: 20px;
}

.padding-left-xl {
  padding-left: 25px;
}

.padding-lr-xs {
  padding-left: 5px;
  padding-right: 5px;
}
.padding-lr-xxs {
  padding-left: 2.5px;
  padding-right: 2.5px;
}
.padding-lr-sm {
  padding-left: 10px;
  padding-right: 10px;
}

.padding-lr {
  padding-left: 15px;
  padding-right: 15px;
}

.padding-lr-lg {
  padding-left: 20px;
  padding-right: 20px;
}

.padding-lr-xl {
  padding-left: 25px;
  padding-right: 25px;
}

.padding-lr-16 {
  padding-left: 8px;
  padding-right: 8px;
}

.padding-tb-xxs {
  padding-top: 3px;
  padding-bottom: 3px;
}

.padding-tb-xs {
  padding-top: 5px;
  padding-bottom: 5px;
}

.padding-tb-sm {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding-tb {
  padding-top: 15px;
  padding-bottom: 15px;
}

.padding-tb-lg {
  padding-top: 20px;
  padding-bottom: 20px;
}

.padding-tb-xl {
  padding-top: 25px;
  padding-bottom: 25px;
}

.padding-tb-16 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.safe-area-inset-bottom {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-inset-bottom-plus {
  margin-bottom: 0;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

.animated {
  -webkit-animation-duration: 0.55s;
  animation-duration: 0.55s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated-all {
  transition: all 0.3s;
}

.animated.rotate-90 {
  transform: rotate(-90deg);
}

.animated.rotate-180 {
  transform: rotate(-180deg);
}

.animated.rotate-45 {
  transform: rotate(45deg);
}

.animated.rotate {
  animation: rotate 0.75s linear infinite;
  transform-origin: center center;
}

.animated.scale {
  transition: all 1s;
  animation: scale 1s ease-out infinite;
  transform-origin: center center;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes scale {
  0% {
    transform: scale(0.45);
  }

  50% {
    transform: scale(1.45);
  }

  100% {
    transform: scale(0.45);
  }
}

.animated.fade-in {
  animation: fadein 0.75s linear;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animated.fade-out {
  animation-name: fadeout;
}

@keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.use-loading {
  top: calc(50% - 9px);
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #ff6a6c;
  border-bottom-color: transparent;
  animation: rotate 0.8s linear infinite;
}

/* uni css */
.uni-page-head-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* tab切换卡 -通用样式*/
.tab-box {
}

.tab-box .tab-nav {
  display: flex;
  align-items: center;
  padding-top: 0.625rem;
  justify-content: center;
}

.tab-box .tab-nav .nav-item {
  padding: 5px 12.5px 7.5px 12.5px;
  position: relative;
}

.tab-box .tab-nav .nav-item text {
  font-size: 1.05rem;
  color: #646464;
}

.tab-box .tab-nav .nav-item.active text {
  font-size: 1.05rem;
  font-weight: 580;
  color: #284450;
}

.tab-box .tab-nav .nav-item.active::after {
  width: 25%;
  height: 4.5px;
  background-color: #95c8c8;
  content: " ";
  position: absolute;
  left: 50%;
  bottom: 2.2.5px;
  margin-left: -12.5%;
  border-radius: 5px;
}

.tab-box .tab-content {
}

.tab-box .tab-content .tab-item {
}

/* 抽屉通用样式控制 */
.filter-drawer {
  height: 100%;
  position: relative;
}

.filter-drawer .drawer-btns {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 7.5px 10px;
  display: flex;
  justify-content: center;
}
